<template>
<div>
      <div class="tit">
             <p>编辑商品</p>
             <p class="xian">
                  <span
                  @click="clickYin()"
                  >{{f?'↑':'↓'}}提示</span>
             </p>
            
         </div>
         <div class="cont" ref="cont" v-if="f">
             <h4>操作提示</h4>
             <p>1、标识“*”的选项为必填项，其余为选填项。</p>
             <p>2、请按提示栏信息商品添加</p>
         </div>
          <div class="el" style="margin:4px 30px 40px 5%;">
            <el-steps :space="500" :active="active" finish-status="success">
            <el-step title="商品分类"></el-step>
            <el-step title="通用信息"></el-step>
            <el-step title="发布完成"></el-step>
            </el-steps>
            </div>
  <div class="all" ref="xuan">
      <el-container>
    <!-- <el-header style="height:140px;"> -->
           
    <!-- </el-header> -->
    <el-main>
       <div class="all_center" ref="all_center">
            <div class="option">
           
            <div class="text">
                <div>
                    <p>
                        请选择游戏（一级）
                    </p>
                    <li v-for="(item,index) in list" :key="index"
                    @click="clickCasc(index,item.name)"
                    :class="nowindex===index?'active':''"
                    >
                        {{item.name}}
                    </li>
                </div>
                <i class="el-icon-right" ref="listTwo1"></i>
                <div ref="listTwo">
                     <p>
                        请选择游戏类型（二级）
                    </p>
                    <li v-for="(item,index) in listTwo.leixing" :key="index"
                     @click="clickTwo(item,index)"
                      :class="nowindex1===index?'active1':''"
                    >
                        {{item}}
                    </li>
                </div>
                <i class="el-icon-right" ref="listTwo2"></i>
                <div ref="listTwo">
                      <p>
                        请选择大区（二级）
                    </p>
                    <li v-for="(item,index) in listThree.qu" :key="index"
                   @click="clickTwo1(item.name,index)"
                    :class="nowindex2===index?'active2':''"
                    >
                        {{item.name}}
                    </li>
                </div>
                <i class="el-icon-right" ref="listThree1"></i>
                <div ref="listThree" 
                >
                  <p>
                        请选择服务器（三级）
                    </p>
                    <li v-for="(item,index) in listFour" :key="index"
                   @click="clickTwo2(item,index)"
                    :class="nowindex3===index?'active3':''"
                    >       
                        {{item}}
                    </li>
                </div>
            </div>
         
         </div>
       </div>   
    </el-main>
    <el-footer style="margin-left:4.5%;">
        <p>您当前选择的是:
            <span class="jilian">{{game}}-{{leixing}}-{{qu}}</span>
        </p>
         <div class="footer">
               <div ref="xia">
                <el-button 
                plain
            style="margin-top: 12px;color:white;background:#55CA7D;"
             @click="next">
                下一步，填写通用信息

            </el-button>
           </div>
           
          </div>
    </el-footer>
  </el-container>
  
       </div>
         <div class="all1" ref="ruleForm1">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  <el-form-item label="商品分类:" >
  <p>
    {{game}}-{{leixing}}-{{qu}}
  </p>
  </el-form-item>
   <el-form-item label="扩展分类:" >
  <p class="addLei">添加扩展分类</p>
  </el-form-item>
  <el-form-item label="关键词:" 

   >
    <el-input  style="width:80%;"
    placeholder="输入关键词"
    v-model="ruleForm.name5"></el-input>
  </el-form-item>
   <el-form-item label="商品名称:" prop="name1"
   >
    <el-input v-model="ruleForm.name1"
    placeholder="输入名称"
     style="width:80%;"
    ></el-input>
  </el-form-item>
  <el-form-item label="商品描述:"
  
   prop="desc">
    <el-input type="textarea"  
    placeholder="输入描述"
    style="width:80%;"
    v-model="ruleForm.desc"></el-input>
  </el-form-item>
    <el-form-item label="商品售价:" prop="name2"
   >
    <el-input v-model="ruleForm.name2"
    placeholder="输入售价"
     style="width:30%;"
    ></el-input>
  </el-form-item> 
  <el-form-item label="折扣价:" 
   >
    <el-input v-model="ruleForm.name3"
    placeholder="输入折扣"
    style="width:30%;"
    ></el-input>
  </el-form-item>
   <el-form-item label="商品库存:" prop="name4"

   >
    <el-input v-model="ruleForm.name4"
     style="width:30%;" placeholder="输入库存"
    ></el-input>
  </el-form-item>
  <el-form-item label="图片上传:" prop="dialogImageUrl">
    <el-upload
   
  action="#"
  list-type="picture-card"
  :auto-upload="false">
    <i slot="default" class="el-icon-plus"></i>
    <div slot="file" slot-scope="{file}">
      <img
        class="el-upload-list__item-thumbnail"
        :src="file.url" alt=""
      >
      <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
    </div>
    <el-dialog :visible.sync="dialogVisible">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
  </el-form-item>

<el-form-item label="视频上传：">
  <el-card
    
    shadow="never"
    style="max-width: 1250px;margin: 20px auto;"
  >
    <ele-form
      :form-data="formData"
      :form-desc="formDesc"
      :request-fn="handleRequest"
      @request-success="handleSuccess"
    />
  </el-card>
</el-form-item>
  <el-form-item label="是否折扣:" prop="delivery">
    <el-switch v-model="ruleForm.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="上架:" prop="delivery">
    <el-switch v-model="ruleForm.delivery1"></el-switch>
  </el-form-item>
 <el-form-item label="商品详情：">
    <markdown @passtofather="myfn"/> 
 </el-form-item>
  <!-- 图标 -->
  <el-form-item>
     <el-button  style="margin-top: 12px;color:#55CA7D;"
                @click="resetForm('ruleForm')"
                >
                上一步，商品分类
            </el-button>
            <el-button  style="margin-top: 12px;color:white;background:#55CA7D;"
             @click="submitForm('ruleForm')"
            >
                √完成，发布商品
            </el-button>    
  </el-form-item>
</el-form>

  </div>
  </div>
</template>

<script>
import axios from 'axios'
import '../../../styles/home.css'
import {list1,commod,shop}  from '../../../api/user'
import markdown from '../../../components/Markdown/index'
export default {
components:{
  markdown
},
data:()=>{
    return {
      // 视频上传
     f:true,
       list:[],
       listTwo:[],//类型
       listThree:[],//大区
       listFour:[],//服务器
          active:0,
      
         yin:'↑',
        id:200301,
       flag:true,
       nowindex:0,
       nowindex1:0,
       nowindex2:0,
        nowindex3:0,
    //    游戏类型大区
       game:'',leixing:'',qu:'',
       ruleForm: {
          name: '',
          name1:'',
           name2:'',
            name3:'',
             name4:'',
              name5:'',
          delivery: false,
           delivery1: false,
          type: [],
          resource: '',
          desc: '',
          
        },
        dialogImageUrl: '',
        dialogVisible: false,
        disabled: false,
        imgUrl:'',
        game1:'',leixing1:'',qu1:'',
        mark:'',
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          name1: [
            { required: true, message: '请输入名称', trigger: 'blur' },
            { min: 3, max: 100, message: '长度在 3 到 100个字符', trigger: 'change' }
          ],
           name2: [
            { required: true, message: '请输入售价', trigger: 'change' }
          ],
          name4: [
            { required: true, message: '请输入库存', trigger: 'blur' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ],
          //  dialogImageUrl: [
          //   { required: true, message: '请上传图片', trigger: 'blur' }
          // ]
        },
          formData: {},
      formDesc: {
        video: {
          label: '',
          type: 'video-uploader',
          attrs: {
            fileSize: 20,
            action: 'https://localhost:4000/list1',
            responseFn (response, file) {
              return URL.createObjectURL(file.raw)
            }
          }
        }
      },
    }
},
async mounted(){
    this.$refs.ruleForm1.style.display="none"
    // axios.get('/list1').then(({data})=>{
    //     // console.log(data,'6666------');
    //     this.list=data;
    // })
  //  console.log( this.$store,"store")
    let res=await shop({});
    console.log(res)
    this.list=this.$store.getters.list
   
},
methods:{
  clickYin(){
    this.f=!this.f
    
  },
  myfn(value) {
			// value 就是子组件传入的参数
    this.mark=value;
    console.log(value,'dity')
		},
  // 视频上传
  handleRequest (data) {
      console.log(data)
      return Promise.resolve()
    },
    handleSuccess () {
      this.$message.success('提交成功')
    },
  // 图片上传
  handleRemove(file) {
        console.log(file,'file');
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
       
      },
      handleDownload(file) {
        console.log(file,'file66');
        this.imgUrl=file.url
         console.log(this.dialogImageUrl,'urlll')
      },
    //完成提交
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
            let obj={
              id:this.id,
              game:this.game,
              leixing:this.leixing,
              qu:this.qu,keyword:this.ruleForm.name5,
              listname:this.ruleForm.name1,
              desc:this.ruleForm.desc,
              price:this.ruleForm.name3,
              num:this.ruleForm.name4,
              oldprice:this.ruleForm.delivery,
              putaway:this.ruleForm.delivery,
              img:this.imgUrl
            }
            // let res=await commod({obj});
            // console.log(res)
            axios.post("/commod",obj).then(({data})=>{
              console.log(data)
            //   if(data.code===200){
            //   this.$router.push('/commodity_manager/true')
            // }
            })
            

          } else {
            console.log('error submit!!');
            return false;
          }
        });
        
      },
    //  上一步
      resetForm(formName) {
        this.$refs[formName].resetFields();
           this.$refs.xuan.style.display="block";
            this.$refs.ruleForm.style.display="none"
      },
    
    // 下一步
next() {
        if (this.active++ > 2) this.active = 0;
        console.log(this.active)
       
        if(this.game==="" && this.leixing==="" && this.qu===""){
            this.$notify.error({
          title: '错误',
          message: '请选择完整信息'
        });
        }else{
            this.$refs.xuan.style.display="none";
            this.$refs.ruleForm1.style.display="block"
            // let obj={
            //     game:this.game,
            //     leixing:this.leixing,
            //     qu:this.qu
            // }
            // localStorage.setItem('game',JSON.stringify(obj))
            
            
        }
    
        },
    
    //   一级筛选
      clickCasc(index,name){
          this.nowindex=index;
          this.listTwo=this.list[index]
        this.listThree=this.list[index]
          console.log( this.listTwo)
          this.game=name
      },
      clickTwo(item,index){
          this.leixing=item
          this.nowindex1=index
      },
       clickTwo1(name,index){
           this.qu=name
           this.nowindex2=index
           console.log(this.listThree.qu[index],'333')
           this.listFour=this.listThree.qu[index].fuwu
       },
        clickTwo2(item,index){
        
          this.nowindex3=index
      },
       
}
}
</script>

<style scoped>
.all1{width:90%;height:2000px;margin:0 auto;}
.addLei{color:aquamarine;cursor: pointer;}
.cont{margin-bottom:40px;}
.el{width:90%;margin:20px auto;}
</style>